<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>数据分析</title>
    <meta charset="utf-8">
    <div id="dy" style="height: 90vh;width:90vw;margin-top: 50px;margin-left:20px;display: flex;flex-direction: row;
flex-wrap: wrap;justify-content: space-between;" >
        <div id="mainChart" style="background-color: #fff;border-radius: 10px; width:43vw; height:46%;"></div>
        <div id="inventoryChart" style="background-color: #fff;border-radius: 10px;width:43vw; height:46%;"></div>
        <div id="exposureChart" style="background-color: #fff;border-radius: 10px;width:43vw; height:46%;"></div>
    </div>
    <!-- 引入 ECharts 文件 -->
    <!--<script th:href="@{/static/js/admin/echarts.js}" src="/js/admin/echarts.js"></script>-->
    <script th:src="@{/static/layui/jquery.min.js}"></script>
    <script th:src="@{/static/js/admin/echarts.js}"></script>
</head>
<body>
<script type="text/javascript">
    //使用ajax加载数据
    $.ajax({
        method:'get',
        url:'/user/goodsSalesVolume',
        dataType:'json',
        success:function(data){
            initChat(data);
        }
    });
    function initChat(data){
        let myChart = echarts.init(document.getElementById('mainChart'));
        option = {
            color: ["#CC9999",
                "#FFFFCC",
                "#CCCC99",
                "#FFCCCC",
                "#FFFF99",
                "#CCCCFF",
                "#0099CC",
                "#CCCCCC",
                "#FF6666"],
            title : {
                text: '家具总销量分析',
                subtext: '销量',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data
            },
            series : [
                {
                    name: '商品销量',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        },
            myChart.setOption(option);
    };

    //使用ajax加载数据
    $.ajax({
        method:'get',
        url:'/user/goodsInventory',
        dataType:'json',
        success:function(data){
            console.log("===========datadatadata======", data);
            initInventoryChat(data);
        }
    });
    function initInventoryChat(data){
        let myChart = echarts.init(document.getElementById('inventoryChart'));



        option = {
            color:["#FF9966",
                ],
            title : {
                text: '家具库存分析',
                subtext: '库存',
                x:'center'
            },
            xAxis: {
                type: 'category',
                data: data.categoryList
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.categoryInventory,
                    type: 'bar'
                }
            ]
        };
        myChart.setOption(option);
    };


    //使用ajax加载数据
    $.ajax({
        method:'get',
        url:'/user/goodsExposure',
        dataType:'json',
        success:function(data){
            console.log("===========datadatadata======", data);
            initExposureChat(data);
        }
    });
    function initExposureChat(data){
        let myChart = echarts.init(document.getElementById('exposureChart'));

        option = {
            color: ['#FF6666'],
            title : {
                text: '家具浏览量分析',
                subtext: '浏览量',
                x:'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: data.categoryList
            },
            series: [
                {
                    name: '浏览量',
                    type: 'bar',
                    data: data.categoryExposure
                }
            ]
        };

        myChart.setOption(option);
    };

</script>


</body>
</html>